/* Gradient artwork stands in for every photograph on the site (client logos
   excepted). Same vocabulary as the services thumbnails: a flat brand gradient,
   one soft radial highlight for depth, nothing illustrative. */

function GradientArt({ gradient = 'var(--gradient-thumb-cool)', radius = 'var(--radius-card)', height = '100%', minHeight, hover = false, style = {}, children }) {
  return (
    <div style={{
      position: 'relative', width: '100%', height, minHeight, borderRadius: radius, overflow: 'hidden',
      background: gradient, ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 55%), radial-gradient(90% 70% at 88% 96%, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 60%)',
        transform: hover ? 'scale(1.06)' : 'scale(1)',
        transition: 'transform .6s cubic-bezier(.22,1,.36,1)',
      }} />
      {children}
    </div>
  );
}

Object.assign(window, { GradientArt });